<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="message">
      <input type="text" />
      <button>点击发送短信</button>
    </div>
  </body>
</html>
<script>
  // 点击发送按钮的时候 按钮是处于禁用状态的 控制禁用状态使用一个属性disabled
  let btn = document.querySelector("button");

  //   保存一下btn的innerText
  let text = btn.innerText;

  //   btn.disabled = true;

  //给btn注册点击事件
  btn.onclick = function () {
    //   声明一个变量，是一个递减的数字，也可以认为是倒计时的描述，每次点击对秒数重置
    var sec = 3;
    //禁用当前的按钮
    this.disabled = true;

    //    短信倒计时的效果

    // 一点击的时候就需要将倒计时显示显示在按钮中

    // 需要一个定时器 间隔定时器
    let interval = setInterval(() => {
      //需要一个变量每隔一秒钟递减，递减之后的结果要设置给btn的innerText或者innerHTML
      //注意：这里用的是一个箭头函数，this指向上下文，上下文的this是指向事件源的，所以箭头函数的this也指向事件源
      //   console.log(this);
      //   让sec递减
      sec--;
      //   当sec的结果是0的时候，需要让按钮解除禁用，把原来保存的按钮的内部文字重新赋值回去
      if (sec === 0) {
        this.innerText = text;
        //还需要清除定时器
        clearInterval(interval);

        // 解除按钮的禁用
        this.disabled = false;
        //中断逻辑的执行
        return;
      }
      this.innerText = `${sec}秒之后再发送`;
    }, 1000);
  };
</script>
